<template>
	<view>
		<!-- <canvas canvas-id="canvas" style="border: 1px solid #000;display: block;margin: 0 auto;" :style="{'width':dw+'px','height':dh+'px'}" @touchstart="touchstart" @touchmove="touchmove" @touchend="touchend"></canvas>	 -->
		
		<canvas canvas-id="bg" style="width: 375px;height: 1000px;border: 1px solid #000;display: block;margin: auto;"></canvas>
		<!-- <view class="display:flex">
			<button type="primary" @click="scale1">放大</button>
			<button type="primary" @click="scale2">缩小</button>
			<button type="primary" @click="rotateleft">左旋转</button>
			<button type="primary" @click="rotateRight">右旋转</button>
		</view> -->
	</view>
</template>

<script>
	let ctx;
	let bgx;
	let ctxCanvas,bgxCanvas;
	let dx=0,dy=0;  //屏幕左上角坐标
	let mx=0,my=0;  //参考点
	let img = {w:0,h:0}; //图片的原始比例
	let iw=0,ih=0;	//图片的宽高
	let scale=0.1;  //缩放比例
	let q=0.1;  //每次放大的比例
	let rotate=0;
	let tx=0,ty=0;
	let isScale = false; // 判断是否是双指
	let bg;
	
	export default {
		data() {
			return {
				dw:200,
				dh:340,
				bgw:100,
				bgh:100, 
				saveImg:'',
				bg:'../../static/bg.png',
				img:'../../static/ctx.png'
			}
		},
		onLoad() {
			bg = uni.createCanvasContext('bg')
			// ctx = uni.createCanvasContext('canvas');
			// bgx = uni.createCanvasContext('canvas-bg');
			// ctxCanvas = wx.createOffscreenCanvas('canvas');
			// bgxCanvas = wx.createOffscreenCanvas('canvas-bg');
			//this.drawBg();
			// uni.getImageInfo({
			// 	src:this.img,
			// 	success:(res) => {
			// 		console.log(res);
			// 		iw=res.width * scale;
			// 		ih=res.height * scale;
			// 		dx =dx + (this.dw/2-iw/2);
			// 		dy =dy + (this.dh/2-ih/2);
			// 		img={w:res.width,h:res.height};
			// 		this.drawImg();			
			// 	}
			// })
			
			let pw = 77.9;
			let ph = 158.2;
			let path = '../../static/iPhone 6 Plus.png';
			let k=3;
			let s = [{
				w:9.75,
				h:9.75,
				x:-25.200000000000003,
				y:-70.85,
				path:'../../static/iPhone 6 Plus1.png'
			},
			{
				w:7,
				h:7,
				x:-13.2,
				y:-70.6,
				path:'../../static/iPhone 6 Plus2.png'
			}]
			
			bg.drawImage('../../static/ipp.png',0,0,pw*k,ph*k)
			bg.drawImage(path,0,0,pw*k,ph*k)
			s.forEach((item,index) => (
				bg.drawImage(item.path,(pw/2+item.x-item.w/2)*k,(ph/2+item.y-item.h/2)*k,item.w*k,item.h*k)
			))
			bg.draw();
			
			// bg.setFillStyle('#000000');
			// bg.fillRect(0,0,100,600);
			// bg.setFillStyle('#007AFF')
			// bg.fillRect(100,0,200,600)
			// bg.save();
			// 
			// bg.translate(20,300)
			// bg.setFontSize(30)
			// bg.drawImage('../../static/logo.png',0,0,100,100)
			// bg.fillText("哈哈哈",0,0)
			// bg.rotate(Math.PI/180*rotate);
			// bg.translate(-20,-300)
			// bg.restore();
			//bg.draw();
		},
		methods: {
			drawBg() {
				console.log('ok');
				bgx.drawImage(this.bg,0,0,this.dw,this.dh);
				bgx.draw();
			},
			touchstart(e) {				
				if(e.touches.length == 2 ) {
				}else if(e.touches.length == 1){
					mx=e.changedTouches[0].x;
					my=e.changedTouches[0].y;
				}
				
			},
			touchmove(e) {
				if(e.touches.length == 2 ) {
					let touch=e.changedTouches;
					let l = Math.sqrt(Math.pow(touch[0].x-touch[1].x,2)+Math.pow(touch[0].y-touch[1].y,2))
					console.log(l);
					//this.scale1();
				}else if(e.touches.length == 1){
					let x=e.changedTouches[0].x;
					let y=e.changedTouches[0].y;
					tx = tx + (x-mx);
					ty = ty + (y-mx);
					dx = dx + x - mx;
					dy = dy + y - my;
					mx=x,my=y;
					ctx.save();
					this.copyRotate(); 
					this.drawImg();
				}
				
				
			},
			touchend(e) {
				// ex=ex + (e.changedTouches[0].x-mx);
				// ey=ey + (e.changedTouches[0].y-my);
			},
			scale1() {
				scale = scale+q;
				let x=dx+iw/2;
				let y=dy+ih/2;
				iw = img.w*scale;
				ih = img.h*scale;
				dx = x-iw/2;
				dy = y-ih/2;
				ctx.save();
				this.copyRotate();
				//ctx.drawImage(bgxCanvas,0,0,this.dw,this.dh)
				this.drawImg();	
				
			},
			scale2() {
				scale = scale-q;
				scale = scale > 0.1 ? scale : 0.1;
				let x=dx+iw/2;
				let y=dy+ih/2;
				iw = img.w*scale;
				ih = img.h*scale;
				dx = x-iw/2;
				dy = y-ih/2;
				ctx.save();
				this.copyRotate();
				this.drawImg();
			},
			rotateleft() {
				ctx.save();
				rotate = rotate -10;
				tx =dx + iw/2;
				ty =dy + ih/2;			
				ctx.translate(tx,ty);
				ctx.rotate(Math.PI/180*rotate);
				ctx.translate(-tx,-ty);
				this.drawImg();	
			},
			rotateRight() {
				ctx.save();
				rotate = rotate +10;
				tx =dx + iw/2;
				ty =dy + ih/2;			
				ctx.translate(tx,ty);
				ctx.rotate(Math.PI/180*rotate);
				ctx.translate(-tx,-ty); 
				this.drawImg();	
						//this.drawBg();
			},
			copyRotate() {
				tx =dx + iw/2;
				ty =dy + ih/2;
				ctx.translate(tx,ty);
				ctx.rotate(Math.PI/180*rotate);
				ctx.translate(-tx,-ty);	
				
			},
			drawImg() {
				// ctx.clearRect(0,0,this.dw,this.dh);	
				ctx.drawImage(this.img,dx,dy,iw,ih); 
				ctx.restore();
				ctx.drawImage(this.bg,0,0,this.dw,this.dh)
				ctx.drawImage('../../static/bg2.png',24,16,20,20)
				 ctx.draw();
				 //this.drawBg();
				// tx =dx + iw/2;
				// ty =dy + ih/2;
				// ctx.translate(tx,ty);
				// ctx.rotate(0);
				// ctx.translate(-tx,-ty);	
				
			},
			// drawBg() {
			// 	tx =dx + iw/2;
			// 	ty =dy + ih/2;
			// 	ctx.translate(tx,ty);
			// 	ctx.rotate(Math.PI/180*this.myMath(rotate));
			// 	ctx.translate(-tx,-ty);
			// 	ctx.drawImage(this.img,10,10,100,80);
			// 	ctx.draw(true);
			// 	
			// },
			myMath(num) {
				return -num;
			},
			save() {
				// uni.canvasToTempFilePath({
				// 	canvasId: "canvas",
				// 	quality:0.7,
				// 	success: res => {
				// 		console.log(res);
				// 		this.saveImg=res.tempFilePath;
				// 	}				
				// })
			}
		}
	}
</script>

<style>
	.canvas{
		display: block;
		margin: 0;
	}
</style>